<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE>
<html>
<head>
    <title>学习统计</title>

    <smLink1></smLink1>
    <smLink2></smLink2>

    <smScript1>
        <script type="text/javascript" src="<%=basePath%>js/lib/ace/components/datatables/media/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="<%=basePath%>js/lib/ace/components/_mod/datatables/jquery.dataTables.bootstrap.min.js"></script>
    </smScript1>
    <smScript2>
        <script type="text/javascript" src="<%=basePath%>js/lib/echarts/echarts.min.js"></script>
        <script type="text/javascript" src="<%=basePath%>js/common/datatables.utils.js"></script>
        <script type="text/javascript" src="<%=basePath%>js/jsp/learn/count.js"></script>
    </smScript2>
</head>

<body>
<div id="breadcrumbs" class="breadcrumbs ace-save-state">
    <ul class="breadcrumb">
        <li>
            <span>学习统计</span>
        </li>
    </ul>
</div>

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <form role="form" class="form-inline m-0 p-l-10 p-b-5">
                <div class="form-group m-r-20">
                    <label class="control-label" for="year">年份：</label>

                    <select id="year" class="form-control input-sm search-select">
                        <c:forEach var="year" varStatus="status" items="${resultVo.results[0]}">
                            <c:choose>
                                <c:when test="${status.last}">
                                    <option selected="selected" value="${year}">${year}年</option>
                                </c:when>
                                <c:otherwise>
                                    <option value="${year}">${year}年</option>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>
                    </select>
                </div>

                <div class="form-group m-r-20">
                    <label class="control-label" for="month">月份：</label>

                    <select id="month" class="form-control input-sm search-select">
                        <option <c:if test="${resultVo.results[1] == 1}">selected="selected"</c:if> value="01">1月</option>
                        <option <c:if test="${resultVo.results[1] == 2}">selected="selected"</c:if> value="02">2月</option>
                        <option <c:if test="${resultVo.results[1] == 3}">selected="selected"</c:if> value="03">3月</option>
                        <option <c:if test="${resultVo.results[1] == 4}">selected="selected"</c:if> value="04">4月</option>
                        <option <c:if test="${resultVo.results[1] == 5}">selected="selected"</c:if> value="05">5月</option>
                        <option <c:if test="${resultVo.results[1] == 6}">selected="selected"</c:if> value="06">6月</option>
                        <option <c:if test="${resultVo.results[1] == 7}">selected="selected"</c:if> value="07">7月</option>
                        <option <c:if test="${resultVo.results[1] == 8}">selected="selected"</c:if> value="08">8月</option>
                        <option <c:if test="${resultVo.results[1] == 9}">selected="selected"</c:if> value="09">9月</option>
                        <option <c:if test="${resultVo.results[1] == 10}">selected="selected"</c:if> value="10">10月</option>
                        <option <c:if test="${resultVo.results[1] == 11}">selected="selected"</c:if> value="11">11月</option>
                        <option <c:if test="${resultVo.results[1] == 12}">selected="selected"</c:if> value="12">12月</option>
                    </select>
                </div>

                <div class="form-group">
                    <button id="search_btn" class="btn btn-danger btn-xs" type="button">
                        <i class="ace-icon iconfont icon-search f-s-12"></i>
                        搜索
                    </button>
                </div>
            </form>
        </div>

        <div class="col-xs-12 m-t-20">
            <div id="learn_count_chart" class="width-p-100 height-500"></div>
        </div>

        <div class="col-xs-12 m-t-20">
            <div class="clearfix">
                <div class="pull-right tableTools-container"></div>
            </div>

            <div class="table-header p-0">
                <h4 class="header m-0 p-l-10 p-t-5 p-b-5">
                    学习人列表
                    【
                        <span id="learn_date"></span>
                    】
                </h4>

                <form role="form" class="form-inline m-0 p-l-10 p-b-5">
                    <div class="form-group m-r-10">
                        <label class="control-label" for="learn_person">学习人：</label>

                        <input id="learn_person" class="form-control input-sm" type="text" placeholder="输入学习人">
                    </div>

                    <div class="form-group">
                        <button id="search_learn_person_btn" class="btn btn-danger btn-xs m-r-30" type="button">
                            <i class="ace-icon iconfont icon-search f-s-12"></i>
                            搜索
                        </button>
                    </div>
                </form>
            </div>

            <div>
                <table id="learn_person_table" class="table table-striped table-bordered table-hover"></table>
            </div>
        </div>
    </div>
</div>
</body>
</html>